
import { history } from 'umi';
import './index.less'
import { Play, Cell, FireO } from '@react-vant/icons';
import React, { useState, useEffect } from 'react'
import { Toast, Calendar, Divider, Loading } from 'react-vant'
import axios from 'axios'


export default function Index() {


  const [btn, setbtn] = useState('签到')
  const [flag, setflag] = useState(false)
  const [datalist, setdatelist] = useState([1, 2, 3])
  const [list, setlist] = useState({})

  const [you, setyou] = useState([
    { title: 10, man: 36, price: 20,date:"2024-12-23T02:16:37.736Z" },
    { title: 20, man: 58, price: 30,date:"2024-12-23T02:16:37.736Z" },
    { title: 66, man: 128, price: 50 ,date:"2024-12-23T02:16:37.736Z"},
    { title: 90, man: 320, price: 150,date:"2023-12-23T02:16:37.736Z" },
    { title: 3, man: 10, price: 10 ,date:"2023-12-23T02:16:37.736Z"},
    { title: 70, man: 150, price: 130,date:"2023-12-23T02:16:37.736Z" },
    { title: 10, man: 36, price: 20 ,date:"2023-12-23T02:16:37.736Z"},
    { title: 8, man: 20, price: 17 ,date:"2023-12-23T02:16:37.736Z"}
  ])

  const [g, setg] = useState(0)

{console.log(you[0].date,'12346589798');}

  const formatDate = date => `${date.getMonth()}/${date.getDate()}`

  useEffect(() => {
    getlist()
  }, [g])
  const getlist = async () => {
    const { data } = await axios.get('http://localhost:3000/zgh_jf_look')
    console.log(data.catelist[0]);
    setlist(data.catelist[0])
  }

  const [num, setnum] = useState(4)
  const [op, setop] = useState(false)
  window.onscroll = function () {
    if (num <= you.length - 2) {
      if (window.innerHeight + window.scrollY >= document.body.scrollHeight - 1) {
        setop(true)
        var time = setTimeout(() => {
          setnum(num + 2)
          console.log(13245679);
          setop(false)
          clearTimeout(time)
        }, 500)
      }
    }
  }

  return (
    <div className='jifen'>

      {/* 头部 */}
      <div className='top'>

        <div>
          <Play rotate={180} className='top_an' onClick={() => { history.push('/app/my') }} />
          积分
        </div>

        <div onClick={() => { history.push('/detail') }}>
          积分明细
        </div>

      </div>


      {/* 积分展示 */}
      <div className='ji_look'>
        <div className='ji_look_con'>当前<span>{list.num}</span>个积分</div>
      </div>

      {/* 日历 */}
      <div className='calendar'>
        <Calendar

          style={{ height: 320 }}
          // type='multiple'
          // 确认按钮

          showConfirm={true}
          // 是否弹框显示
          poppable={false}
          // 水平滑动
          // horizontal={true}

          rowHeight={45}
          onConfirm={v => {


            if (v.getDate() == new Date(list.date).getDate()) {
              Toast({
                message: '今天已经签到了改天再来吧',
                icon: <FireO />,
              })
            } else {
              if (v.getDate() == new Date().getDate()) {
                var data = {
                  pid: list._id,
                  cate: 1,
                  date: new Date()
                }


                var newday = (list.day + 1)
                var day = newday / 7
                var newnum = list.num

                var mei = 0

                console.log('asdasd', day);

                if (day == 1) {
                  data.title = '+5'
                  newnum += 5
                  Toast.success('恭喜您累计签到7天,积分加:5')
                } else if (day == 2) {
                  data.title = '+10'
                  newnum += 10
                  mei = 10
                  Toast.success('恭喜您累计签到14天,积分加:10')
                } else if (day == 3) {
                  data.title = '+15'
                  newnum += 15
                  mei = 15
                  Toast.success('恭喜您累计签到28天,积分加:15')
                } else if (day == 4) {
                  data.title = '+20'
                  newnum += 20
                  mei = 20
                  Toast.success('恭喜您累计签到28天,积分加:20')
                } else {
                  data.title = '+1'
                  newnum += 1
                  mei = 1
                  Toast.success('签到成功积分加:1')
                }



                const add = async () => {
                  await axios.post('http://localhost:3000/zgh_jf_add', data)

                }
                add()
                console.log(list, 11111111);
                var bigdata = {
                  _id: list._id,
                  day: newday,
                  num: newnum,
                  date: new Date()
                }
                console.log(bigdata, '我是自动');
                const edit = async () => {
                  await axios.put('http://localhost:3000/zgh_jf_edit', bigdata)
                }
                edit()
              } else {
                console.log(v.getDate() > new Date(list.date).getDate(),'true/false');
                console.log(v.getDate(),new Date(list.date).getDate(),'21346589512');
                if (v.getDate() < new Date(list.date).getDate()) {
                  Toast.fail('您的补签机会为0')

                } else {
                  Toast.fail('不可以提前签到哟')
                }
              }
            }


            setg(g + 1)


          }}


          minDate={new Date(2023, 10, 1)}

          // 点击日期触发的事件
          onSelect={(value) => {

            if (value.getDate() < new Date().getDate()) {
              setbtn('补签')
              setflag(true)
            }
            if (value.getDate() == new Date().getDate()) {
              setbtn('签到')
              setflag(true)
              console.log('我签到了')

            }
            if (value.getDate() > new Date().getDate()) {
              console.log('提前')
              setflag(false)
            }


          }}

          // 按钮
          confirmText={btn}
        />
      </div>


      {/* 积分兑换文字 */}
      <Divider className='txt' style={{
        color: '#333333',
        borderColor: '#333333',
        padding: '0 10px',
        fontSize: '20px'
      }}>
        积分兑换
      </Divider>

      {/* 优惠券 */}
      <div className='Discount'>


        {
          you.slice(0, num).map((ele, index) => {
            return <div key={index}>
              <div className='Discount_top'>
                <p>￥{ele.title}</p>
                <div className='Discount_one'>全场通用</div>
                <div className='Discount_two'>满{ele.man}可用</div>
                <div className='Discount_three' onClick={() => {

                  if (list.num - ele.price >= 0) {
                    var data = {
                      pid: list._id,
                      cate: 2,
                      date: new Date(),
                      title: '-' + ele.price
                    }
                    console.log(data);
                    const add = async () => {
                      await axios.post('http://localhost:3000/zgh_jf_add', data)
                    }
                    add()


                    var bigdata = {
                      _id: list._id,
                      num: list.num - ele.price,
                      date: new Date(),
                      you: list.you + 1
                    }


                    const edit = async () => {
                      await axios.put('http://localhost:3000/zgh_jf_edit', bigdata)
                    }
                    edit()
                    setg(g + 1)

                    var yhj={
                      title:ele.title,
                      man:ele.man,
                      price:ele.price,
                      date:ele.date
                    }

                    const yjh_add=async()=>{
                      await axios.post('http://localhost:3000/zgh_yhj_add',yhj)
                    }

                    yjh_add()

                    console.log(yhj,'mihao1soshi')

                    Toast.success('兑换成功')
                  } else {
                    Toast.fail('抱歉您的积分不足快去签到吧')
                  }


                }}>{ele.price}积分兑换</div>
              </div>
              <div className='Discount_bottom'>
                有效期{ele.date.replace('T',' ').split('.')[0]}
              </div>
            </div>
          })
        }

      </div>

      <div className='loding' style={{ display: op ? 'block' : 'none' }}>

        <Loading type="ball" size='25' />

      </div>

    </div>
  )
}
